<template>
    <div>
        <a href="https://juejin.cn/post/6844903490020442125" target="_blank">
            <h3>canvas 的基本使用</h3>
        </a>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="基本使用" name="first">
                <!--canvas画布:是HTML5中新增的一个特性，双闭合标签 
                        canvas标签默认宽度与高度 300 * 150 
                        浏览器认为canvas标签是一张图片
                        给canvas画布添加文本内容没有任何意义 
                        给canvas标签添加子节点没有任何意义的 
                        你想操作canvas画布：画布当中绘制图形、显示一个文字，都必须通过JS完成
                        canvas标签的w|h务必通过canvas标签属性width|height设置
                        切记不能通过样式去设置画布的宽度与高度 -->
                <canvas width="800" height="550" ref="firstCanvasInfo"></canvas>
            </el-tab-pane>
            <el-tab-pane label="画一个矩形" name="second">
                <canvas width="800" height="550" ref="secondCanvasInfo"></canvas>
            </el-tab-pane>
            <el-tab-pane label="画一个圆形" name="third">
                <canvas width="800" height="550" ref="thirdCanvasInfo"></canvas>
            </el-tab-pane>
            <el-tab-pane label="绘制文字" name="fourth">
                <canvas width="800" height="550" ref="fourthCanvasInfo"></canvas>
            </el-tab-pane>
            <el-tab-pane label="绘制柱状图" name="fiveth">
                <canvas width="800" height="550" ref="fivethCanvasInfo"></canvas>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
export default {
    name: "CanvasInfo",
    data() {
        return {
            activeName: "first",
        }
    },
    methods: {
        handleClick(tab, event) {
            eval(`this.${this.activeName}Canvas()`);
        },
        firstCanvas() { //基本使用
            let canvas = this.$refs.firstCanvasInfo;  //获取画布
            let ctx = canvas.getContext('2d');  //获取画笔
            ctx.moveTo(100, 100); //绘制线段:绘制线段的起点的设置, 左上角为 0,0
            //其他点的设置：可以有多个
            ctx.lineTo(100, 200);
            ctx.lineTo(200, 100);
            //设置图形的填充的颜色
            ctx.fillStyle = "red";
            ctx.fill();

            //设置线段的颜色与宽度
            ctx.strokeStyle = "purple";
            ctx.lineWidth = "20"

            ctx.closePath(); //可以设置起点与最终的结束点连接在一起
            //stroke方法绘制线段
            ctx.stroke();
        },
        secondCanvas() { //画一个矩形
            let canvas = this.$refs.secondCanvasInfo;  //获取画布
            let ctx = canvas.getContext('2d');  //获取画笔
            //绘制矩形第一种方式:参数为x、y、w、h
            //这种的矩形没有办法设置填充颜色
            ctx.strokeRect(100, 200, 100, 200);
            //第二种方式绘制矩形
            //填充颜色可以替换
            //绘制图形之前设置填充颜色
            ctx.fillStyle = 'skyblue';
            ctx.fill();
            ctx.fillRect(300, 200, 100, 200);
        },
        thirdCanvas() { //画一个圆形
            let canvas = this.$refs.thirdCanvasInfo;  //获取画布
            let ctx = canvas.getContext('2d');  //获取画笔
            //绘制圆形
            ctx.beginPath();
            //绘制圆形的方法：x、y,r,起始弧度、结束的弧度,是否逆时针绘制
            ctx.arc(100, 100, 50, 0, 2 * Math.PI, true);
            //设置填充颜色
            ctx.fillStyle = 'red';
            ctx.fill();
            //绘制圆形
            ctx.stroke();

            //绘制一个弧度
            ctx.beginPath();
            ctx.arc(200, 200, 50, 0, 2, false);
            ctx.stroke();
        },
        fourthCanvas() { //绘制文字
            let canvas = this.$refs.fourthCanvasInfo;  //获取画布
            let ctx = canvas.getContext('2d');  //获取画笔
            //绘制矩形
            ctx.fillRect(100, 200, 100, 200);
            //清除画布-整个画布被清除
            //ctx.clearRect(0,0,600,400);
            //清除部分画布
            ctx.clearRect(100, 200, 50, 100);
            //设置文字大小
            ctx.font = "20px 微软雅黑";
            ctx.fillStyle = 'red';
            //绘制文字
            ctx.fillText("数据可视化", 50, 20);
        },
        fivethCanvas() { //绘制柱状图
            let canvas = this.$refs.fivethCanvasInfo;  //获取画布
            let ctx = canvas.getContext('2d');  //获取画笔
            //绘制文本--左上角的文本
            ctx.font = "16px 微软雅黑";
            ctx.fillText('数据可视化', 50, 80);
            //绘制线段
            ctx.moveTo(100, 100);
            ctx.lineTo(100, 400);
            ctx.lineTo(700, 400);
            ctx.stroke();

            //绘制其他的线段
            ctx.moveTo(100, 100);
            ctx.lineTo(700, 100);
            ctx.fillText('150', 70, 110);

            ctx.moveTo(100, 160);
            ctx.lineTo(700, 160);
            ctx.fillText('120', 70, 170);

            ctx.moveTo(100, 220);
            ctx.lineTo(700, 220);
            ctx.fillText('90', 70, 230);

            ctx.moveTo(100, 280);
            ctx.lineTo(700, 280);
            ctx.fillText('60', 70, 290);

            ctx.moveTo(100, 340);
            ctx.lineTo(700, 340);
            ctx.fillText('30', 70, 350);
            ctx.fillText('0', 70, 400);
            ctx.stroke();
            //绘制水平轴底部的线段
            ctx.moveTo(250, 400);
            ctx.lineTo(250, 410);
            //底部的文字
            ctx.fillText('食品', 170, 415);

            ctx.moveTo(400, 400);
            ctx.lineTo(400, 410);
            ctx.fillText('数码', 310, 415);
            ctx.moveTo(550, 400);
            ctx.lineTo(550, 410);
            ctx.fillText('服饰', 450, 415);
            ctx.fillText('箱包', 600, 415);
            ctx.stroke();

            //绘制矩形
            ctx.fillStyle = 'red';
            ctx.fillRect(120, 200, 100, 200)
        },
    },
    mounted() {
        this.firstCanvas();
    },
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

canvas {
    border: 1px solid black;
}
</style>